<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="../js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">

    <my-directive></my-directive>

    <div my-directive2
         my-url='http://www.baidu.com'
         my-link-text='ccccccccc'>

    </div>


</div>
<script type="text/javascript">

    var app = angular.module("myApp",[]);
    app.directive('myDirective',function(){
        return{
            restrict:'E',
            replace:true,
            template:'<a href="http://www.baidu.com">click Me</a>'
        }
    });


    app.directive('myDirective2', function() {
        return {
            restrict: 'AE',
            replace: true,
            scope: {
                myUrl: '@',
                myLinkText: '@'
            },
            template: '<a href="{{myUrl}}">{{myLinkText}}</a>'
        };
    });


</script>
</body>
</html>